import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Form,
  Input,
  Button,
  Card,
  Radio,

} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';


const FormItem = Form.Item;


@connect(({ admin, loading }) => ({
  admin,
  loading: loading.effects['admin/fetchAdmininfo'],
  submitting: loading.effects['admin/updateAdminfo']
}))
@Form.create()
class EditForm extends PureComponent {

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'admin/fetchAdmininfo',
      payload: params.id,
    });
  }

  onChange = (e, name) => {
    const { admin, dispatch } = this.props;
    const { adminInfo = {} } = admin;
    adminInfo[name] = e.target.value;
    dispatch({
      type: 'admin/updateRadio',
      payload: adminInfo,
    });
  }

  resetAdminPwd = e => {
    e.preventDefault();
    const { dispatch, admin } = this.props;
    const { adminInfo = {} } = admin;
    dispatch({
      type:'admin/resetAdminPwd',
      payload:{id:adminInfo.id}
    });
  }

  handleSubmit = e => {
    const { dispatch, form, admin } = this.props;
    const { adminInfo = {} } = admin;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.id = adminInfo.id;
        dispatch({
          type: 'admin/update',
          payload: values,
        });
      }
    });
  };

  render() {
    const { admin, loading, submitting, form } = this.props;
    const { adminInfo = {} } = admin;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper>
        <Card bordered={false} loading={loading}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label='登录帐号'>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入登录帐号' }],
                initialValue: adminInfo.name
              })(
                <Input placeholder='输入帐号，英文加数字' />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='真实姓名'>
              {getFieldDecorator('realname', {
                rules: [{ required: true, message: '请输入真实姓名' }],
                initialValue: adminInfo.realname
              })(
                <Input placeholder='真实姓名' allowClear />
              )}

            </FormItem>
            <FormItem {...formItemLayout} label='联系电话'>
              {getFieldDecorator('phone', {
                rules: [{ required: true, message: '请输入联系电话' }],
                initialValue: adminInfo.phone
              })(
                <Input placeholder='联系电话' type='number' allowClear />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='职能部门'>
              {getFieldDecorator('department', {
                initialValue: adminInfo.department
              })(
                <Radio.Group onChange={(e) => this.onChange(e, 'department')}>
                  <Radio value={0}>
                    管理
                  </Radio>
                  <Radio value={1}>
                    运营
                  </Radio>
                  <Radio value={2}>
                    微信公众号
                  </Radio>
                </Radio.Group>
              )}

            </FormItem>
            <FormItem {...formItemLayout} label='状态'>
              {getFieldDecorator('status', {
                initialValue: adminInfo.status
              })(
                <Radio.Group onChange={(e) => this.onChange(e, 'status')}>
                  <Radio value={0}>
                    激活
                  </Radio>
                  <Radio value={1}>
                    冻结
                  </Radio>

                </Radio.Group>
              )}

            </FormItem>
            <FormItem {...formItemLayout} label='上次登录ip'>
              {adminInfo.login_ip}
            </FormItem>
            <FormItem {...formItemLayout} label='上次登录时间'>
              {adminInfo.last_login_date}
            </FormItem>

            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                <FormattedMessage id="form.submit" />
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetAdminPwd}>
                <FormattedMessage id="form.resetpwd" />
              </Button>

            </FormItem>
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default EditForm;
